<template>
    <el-dialog title="新建组件" :visible.sync="dialogVisible" :modal-append-to-body='false' width="40%" :close-on-click-modal="false" class="newcomponent" :before-close="handleClose">
        <el-form label-width="120px" label-position="right" style="width:85%;">
            <el-form-item label="标题：">
                <el-input type="text" size="small" v-model="component.title" placeholder="请输入标题"></el-input>
            </el-form-item>
            <el-form-item label="名称：">
                <el-input type="text" size="small" v-model="component.name" placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item label="是否为模态框：">
                <el-radio-group v-model="component.is_dialog">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="是否为指令：">
                <el-radio-group v-model="component.is_directive">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="宽度：">
                <el-input-number type="text" :min="0" size="small" v-model="component.width"></el-input-number> px
            </el-form-item>
            <el-form-item label="高度：">
                <el-input-number type="text" :min="0" size="small" v-model="component.height"></el-input-number> px
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="intCreate">创 建</el-button>
        </span>
    </el-dialog>
</template>
<script type="text/javascript">
//通过命名空间的方式映入
import { createNamespacedHelpers } from 'vuex'
//获取需要管理的方法
const { mapState, mapActions, mapGetters, mapMutations } = createNamespacedHelpers('cloud')

import canvas from '../../widgets/basics/canvas/index.js'
// import empty from './empty.vue'
export default {
    props: {
        value: [Object, Array, String, Number, Boolean]
    },
    components: {
        //empty
    },
    data: function() {
        return {
            model_config: canvas,
            component: {
                title: "",
                type: "component",
                name: "",
                width: 800,
                height: 500,
                is_dialog: false,
                is_directive: false,
            },
            dialogVisible: false
        }
    },
    /**
     * 计算属性
     * @type {Object}
     */
    computed: {

    },
    /**
     * 数据监听
     * @type {Object}
     */
    watch: {

    },
    /**
     * 页面加载执行
     * @return {[type]} [description]
     */
    mounted() {
        // console.log('this',this);
    },
    /**
     * 页面方法
     * @type {Object}
     */
    methods: {
        ...mapActions(['setPage']),
        handleClose() {
            this.dialogVisible = false
        },
        /**
         * 创建页面
         * @return {[type]} [description]
         */
        intCreate() {
            console.log("提交")
            //判断规则
            if (!this.checked()) {
                return false;
            }
            //
            this.component.width = this.component.width + 'px';
            this.component.height = this.component.height + 'px';
            //
            // 提交
            this.model_config.data = this.component;
            //
            this.setPage(this.model_config);

            this.dialogVisible = false;
        },
        /**
         * 检查输入是否合法
         * @return {[type]} [description]
         */
        checked() {
            let ret = false;
            let tips = '';
            let rules = /^[a-zA-Z0-9]+$/;
            if (!this.component.title) {
                tips = '请输入标题！';
                ret = true;
            } else if (this.component.name == 'index' || !rules.test(this.component.name)) {
                tips = '输入的名称不符合规则！';
                ret = true;
            } else if (!(this.component.width > 0 && this.component.height > 0)) {
                tips = "请输入有效的宽高值！";
                ret = true;
            } else if (rules.test(this.component.name)) {
                /**
                 * 检测输入name是否重复
                 * @return {[type]} [description]
                 */
                this.$cloud.post('build/component_check', { name: this.component.name }).then(response => {
                    if (response.code != 0) {
                        tips = '该名称已被占用';
                        ret = true;
                    }
                });
            }

            if (ret) {
                this.$message.warning(tips);
            }
            return !ret;
        }
    }
}
</script>
<style type="text/css" lang="scss">
.newcomponent {
    .el-form-item {
        margin-bottom: 5px;
    }
}
</style>